<template>
  <div class="w-full p-6 flex h-full bg-bg">
    <div class="w-full rounded-md">
      <div class="flex flex-row justify-between mb-4">
        <el-input
          v-model="search"
          placeholder="根据名称进行搜索"
          prefix-icon="el-icon-search"
          @change="searchChange"
        ></el-input>
      </div>
      <vxe-table
        align="center"
        :data="staffList"
        :loading="loading"
        round
        border
      >
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="id" :visible="false"> </vxe-column>
        <vxe-column field="name" title="名称"></vxe-column>
        <vxe-column field="role" title="角色"></vxe-column>
        <vxe-column field="staffNumber" title="学号"></vxe-column>
        <vxe-column field="userName" title="用户名"></vxe-column>
        <vxe-column field="isDisable" title="是否禁用"></vxe-column>
        <vxe-column title="操作" width="100" show-overflow>
          <template #default="{ row }">
            <vxe-button
              type="text"
              icon="fa fa-edit"
              @click="editEvent(row)"
            ></vxe-button>
            <vxe-button
              type="text"
              icon="fa fa-trash-o"
              @click="deleteEvent(row)"
            ></vxe-button>
          </template>
        </vxe-column>
      </vxe-table>
      <div class="flex flex-row justify-between mt-4">
        <el-button :disabled="!pageInfo.hasPre" @click="prePage"
          >上一页</el-button
        >
        <p>{{ pageInfo.current }}</p>
        <el-button :disabled="!pageInfo.hasNext" @click="nextPage"
          >下一页</el-button
        >
      </div>
    </div>
  </div>
  <el-dialog title="修改人员信息" width="30%" center v-model="modelVisiable">
    <re-update @emitUpdate="getStaffList"></re-update>
  </el-dialog>
</template>

<script lang="ts">
import { onMounted, reactive, ref } from "vue-demi";
import { VXETable } from "vxe-table";
import {
  deleteStaff,
  pageStaff,
  PageStaffDTO,
  searchStaff,
  StaffSelectDTO
} from "/@/api/staff";
import ReUpdate from "/@/components/ReStaffInput/update.vue";
import { useStaffStoreHook } from "/@/store/modules/staff";
import { errorMessage, successMessage } from "/@/utils/message";

export default {
  components: {
    ReUpdate
  },
  setup() {
    const loading = ref(true);
    const staffList = ref<StaffSelectDTO[]>([]);
    const pageInfo = reactive({
      current: 1,
      size: 10,
      hasPre: false,
      hasNext: true
    });
    const search = ref("");

    const getStaffList = async () => {
      search.value = "";
      const res = await pageStaff(pageInfo.current, pageInfo.size);
      const data = res.response as PageStaffDTO;
      data.staffList.forEach((item, index) => {
        data.staffList[index].isDisable =
          item.isDisable === 1 ? "已禁用" : "未禁用";
      });
      pageInfo.hasPre = data.hasPre;
      pageInfo.hasNext = data.hasNext;
      staffList.value = data.staffList;
      loading.value = false;
      modelVisiable.value = false;
    };

    const prePage = () => {
      if (pageInfo.hasPre) {
        pageInfo.current--;
        if (search.value === "") {
          getStaffList();
        } else {
          searchPage();
        }
      }
    };

    const nextPage = () => {
      if (pageInfo.hasNext) {
        pageInfo.current++;
        if (search.value === "") {
          getStaffList();
        } else {
          searchPage();
        }
      }
    };

    const searchPage = async () => {
      const res = await searchStaff(
        search.value,
        pageInfo.current,
        pageInfo.size
      );
      if (res.code === 1) {
        const data = res.response as PageStaffDTO;
        data.staffList.forEach((item, index) => {
          data.staffList[index].isDisable =
            item.isDisable === 1 ? "已禁用" : "未禁用";
        });
        pageInfo.hasPre = data.hasPre;
        pageInfo.hasNext = data.hasNext;
        staffList.value = data.staffList;
      }
    };

    const modelVisiable = ref(false);
    const modifyStaff = ref<StaffSelectDTO>(null);
    // 修改事件
    const editEvent = (row: StaffSelectDTO) => {
      modifyStaff.value = JSON.parse(JSON.stringify(row));
      modifyStaff.value.isDisable =
        modifyStaff.value.isDisable === "已禁用" ? true : false;
      const staffStore = useStaffStoreHook();
      staffStore.setStaff(modifyStaff.value);
      modelVisiable.value = true;
    };

    const deleteEvent = (row: StaffSelectDTO) => {
      VXETable.modal
        .confirm("您确定要删除 " + row.name + "?")
        .then(async type => {
          if (type === "confirm") {
            const res = await deleteStaff(row.id);
            if (res.code === 1) {
              successMessage(res.message);
              getStaffList();
            } else {
              errorMessage(res.message);
            }
          }
        });
    };

    const searchChange = async () => {
      pageInfo.current = 1;
      let res = null;
      if (search.value !== "") {
        res = await searchStaff(search.value, pageInfo.current, pageInfo.size);
      } else {
        res = await getStaffList();
      }
      if (res.code === 1) {
        const data = res.response as PageStaffDTO;
        data.staffList.forEach((item, index) => {
          data.staffList[index].isDisable =
            item.isDisable === 1 ? "已禁用" : "未禁用";
        });
        pageInfo.hasPre = data.hasPre;
        pageInfo.hasNext = data.hasNext;
        staffList.value = data.staffList;
      }
    };
    onMounted(() => {
      getStaffList();
    });
    return {
      staffList,
      pageInfo,
      loading,
      editEvent,
      modelVisiable,
      modifyStaff,
      deleteEvent,
      getStaffList,
      prePage,
      nextPage,
      search,
      searchChange
    };
  }
};
</script>

<style scoped></style>
